body{
    margin: 0;
    padding: 0;
}

ul {
    margin: 0;
    padding: 0;
}

li{
    list-style: none;
}
.flex-container {
    display: flex;
    flex-flow: row wrap;
	padding:20px;
}
li:nth-child(1){
	height:120px;
}
li:nth-child(2){
	height:100px;
}
li:nth-child(3){
	height:40px;
}
li:nth-child(4){
	height:200px;
	border:1px solid blue;
}
.flex-item {
	border:1px solid red;
    padding: 20px;
    width: 150px;
    margin-top: 10px;
}
/*小于640px时*/
@media (max-width: 640px) {
    .flex-container {
	  align-items: flex-start;
	  justify-content:flex-start;
	}
	li:nth-child(4){
	  order:-1;
	}
}
/*大于640px时*/
@media (min-width: 640px) {
    .flex-container {
	  align-items:center;
	  justify-content: space-between;
	}
}